<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.box {
				width: 500px;
				height: 400px;
				border: 1px solid #ccc;
				margin: 100px auto;
				overflow: hidden;
			}
			ul {
				width: 600px;
				height: 40px;
				margin-left: -1px;
				list-style: none;
			}
			li {
				float: left;
				width: 101px;
				height: 40px;
				text-align: center;
				font: 600 18px/40px "simsun";
				background-color: pink;
				cursor: pointer;
			}
			span{
				display: none;
				width: 500px;
				height: 360px;
				background-color: yellow;
				text-align: center;
				font: 700 150px/360px "simsun";
			}
			.show {
				display: block;
			}
			.current {
				background-color: yellow;
			}
		</style>
		<script type="text/javascript">
			window.onload = function () {
				//需求:鼠标放到上面的li上,li本身变色(添加类),对应的span也显示出来(添加类);
				//思路:1.点亮盒子.  	2.利用索引值显示盒子.
				//步骤:
				//1.获取事件源和相关元素
				//2.绑定事件
				//3.书写事件驱动程序(排他思想)
				
				
				var boxArr = document.getElementByClassName("box");
				for(var i = 0;i<boxArr.length;i++){
					fn(boxArr[i]);
				}
				function fn(ele){
					var liArr = ele.getElementsByTagName("li");
					var spanArr = ele.getElementsByTagName("span");
					for(var i = 0;i<liArr.length;i++){
						liArr[i].index = i;
						liArr[i].onmouseover = function () {
							for(var j = 0;j<liArr.length;j++){
								liArr[j].className = "";
								spanArr[j].className = "";
								
							}
							this.className = "current";
							spanArr[this.index].className = "show";
						}
					}
				}
			}
			
		</script>
	</head>
	<body>
		<div class="box">
			<ul>
				<li class = "current">鞋子</li>
				<li>袜子</li>
				<li>帽子</li>
				<li>裤子</li>
				<li>裙子</li>
			</ul>
			<span class = "show">鞋子</span>
			<span>袜子</span>
			<span>帽子</span>
			<span>裤子</span>
			<span>裙子</span>
		</div>
	</body>
</html>
